@import '../../styles/var.scss';
.carousel{
  height:420px;
  transition: background 0.5s ease 0s;
  &-inner{
    position:relative;
    margin:0 auto;
    height:100%;
  }
  &-item{
    cursor: pointer;
    transition: opacity 0.5s ease 0s;
    display:block;
    opacity:0;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-align:center;
    img{
      // max-width:100%;
      // max-height:100%;
      // width:100%;
      height:100%;
    }
    overflow:hidden;
  }
  &-nav{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:0;
    text-align:center;
    z-index:10;
    span{
      font-size:0;
      display:inline-block;
      border:0;
      background:#f5f5f5;
      outline:none;
      // height:12px;
      // width:12px;
      height:5px;
      width:15px;
      // border-radius:50%;
      top:-40px;
      position:relative;
      margin:0 4px;
      box-shadow:0 0 2px rgba(0,0,0,0.1);
      &.active{
        background:$color-primary;
      }
    }
  }
}